<template>
    <div class="peitext" v-if="message">
        <div style="width: 90%;height: 380px;margin: 0 auto;" ref="hjs">
            <header style="text-align: center;font-size: 18px;font-weight: bold;">第{{ count + 1 }}题</header>
            <div
                style="width: 100%;height: 370px;background-color: white;box-sizing: border-box;padding: 20px;position: relative;">
                <span style="display: block;position: absolute;top:0;right: 20px;font-size: 15px;font-weight: bold;">共计{{
                    numb }}分</span>
                <div style="display: flex;"><span>题目:</span>
                    <div
                        style="margin-left: 10px;width: 80%;max-height: 105px;word-wrap:break-word; word-break:break-all; overflow: hidden;">
                        {{ list[count].question }}</div>
                </div>
                <textarea type="text" v-if="list[count].xuanxiang.length == 0 ? true : false" v-model="val"
                    style="width: 90%;height: 70%;" placeholder="请输入您的回答"></textarea>
                <div v-if="list[count].xuanxiang.length == 0 ? false : true" class="xuanze">
                    <li v-for="(item, index) in list[count].xuanxiang"
                        style="list-style: none;margin-left: 10px;margin-top: 10px;word-wrap:break-word; word-break:break-all;">
                        <input type="checkbox" @click="check(index)">
                        {{ item }}
                    </li>
                </div>
                <div style="position: absolute;bottom:50px ;width: 92%;text-align: center;color: red;" v-show="sear">
                    {{ skr == true ? '回答正确' : '回答错误' }}</div>
                <div
                    style="width: 92%;height: 30px;position: absolute;bottom: 10px;display: flex;box-sizing: border-box;padding: 0 0 0 180px;">
                    <button @click="reduces" class="bts1">上一题</button>
                    <button style="margin-left: 10px;" @click="adds" class="bts2">下一题</button>
                    <button style="width: 60;height: 30px;color: #07C160;margin-left: 50px;" @click="send">确定答案</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ipcRenderer } from 'electron'

export default {
    data() {
        return {
            list: [

            ],
            das: '',
            yuan: '',
            count: 0,
            val: '',
            numb: 0,
            // 选项
            cot: '',
            // 提示是否正确显示
            sear: false,
            // 判断回答是否正确
            skr: false,
            // 判断是否可以进行下一题
            next: false,
            arr1: [],
            arr2: [],
            // 表示要出几道题
            sess: 10,
            // 大于10
            numbers: [],
            // 小于10
            ntt: [],
            num: 10,
            //设置选项数组
            xuanze: [],
            gpt: 0,
            message: null
        }
    },
    beforeCreate() {

    },
    created() {
        ipcRenderer.on('message-from-main', (event, message) => {
            console.log(message);
            this.message = message
            console.log(this.message);
            this.arr1 = JSON.parse(this.message).arr1
            this.arr2 = JSON.parse(this.message).arr2
            console.log(this.arr1);
            console.log(this.arr2);
            this.arr2.forEach((item, index) => {
                if (item == '') {
                    this.arr1.splice(index, 1)
                    this.arr2.splice(index, 1)
                }
            })
            console.log(this.arr1);
            console.log(this.arr2);
            if (this.arr1.length >= 10) {
                console.log(1);
                this.list=[]
                this.numbers = []
                this.num = 10
                this.load(this.num)
            }
            if(this.arr1.length<10&&this.arr1.length>=4){
                this.list=[]
                this.numbers = []
                this.num = this.arr1.length
                this.load(this.num)
            }
            if(this.arr1.length<4){
                this.list=[]
                for(var i=0;i<this.arr1.length;i++){
                    this.list.push({ question: this.arr2[i], anwser: this.arr1[i], xuanxiang: [], true: '', score: 0 })
                }
            }
        })
    },

    mounted() {
        this.yuan = this.$refs.hjs

    },
    methods: {

        // 初始生成题目处理,数组长度大于10
        load(num) {
            const writeLine = (num) => {
                //    生成随机题号
                if (this.numbers.length < num) {
                    var randomNumber = Math.floor(Math.random() * num)
                    if (!this.numbers.includes(randomNumber)) {
                        this.numbers.push(randomNumber);
                        if (this.numbers.length < num) {
                            // setTimeout(writeLine);
                            writeLine(num)
                        }
                    } else {
                        if (this.numbers.length < num) {
                            // setTimeout(writeLine);
                            writeLine(num)
                        }
                    }
                }
            }
            writeLine(num)
            // 判断随机数组是否为想要的长度
            if (this.numbers.length == num) {
                for (let i = 0; i < this.numbers.length; i++) {
                    if (i < Math.floor(this.numbers.length / 2)) {
                        const hck = () => {
                            var randomNumbers = Math.floor(Math.random() * num)
                            if (!this.xuanze.includes(this.arr2[randomNumbers])) {
                                this.xuanze.push(this.arr2[randomNumbers]);
                            }
                            if (this.xuanze.length < 4) {
                                hck()
                            }
                        }
                        hck()
                        if (this.xuanze.length == 4) {
                            var rand = Math.floor(Math.random() * 3)
                            let scode = this.xuanze.findIndex((item) => item == this.arr2[this.numbers[i]])
                            if (scode == -1) {
                                this.xuanze[rand] = this.arr2[this.numbers[i]]
                                this.list.push({ question: this.arr1[this.numbers[i]], anwser: this.arr2[this.numbers[i]], xuanxiang: this.xuanze, true: rand + 1, score: 0 })
                                console.log('LIST输出了啦啦啦啦啦啦啦啦啦啦啦')
                            } else {
                                console.log(scode);
                                this.list.push({ question: this.arr1[this.numbers[i]], anwser: this.arr2[this.numbers[i]], xuanxiang: this.xuanze, true: scode + 1, score: 0 })
                                console.log('LIST输出了');
                            }
                        }
                        this.xuanze = []
                    } else {
                        this.list.push({ question: this.arr2[this.numbers[i]], anwser: this.arr1[this.numbers[i]], xuanxiang: [], true: '', score: 0 })
                    }
                }
            }
            console.log(this.list, 'woshilist');

        },
        // 判断数组中是否有相同项
        hasDuplicates(array) {
            var set = new Set(array);
            return set.size !== array.length;
        },
        // 点击选项
        check(index) {
            if (document.querySelectorAll('li input')) {
                var lis = document.querySelectorAll('li input')
                // 清空每个选项
                for (var i = 0; i < lis.length; i++) {
                    lis[i].checked = false
                }
                lis[index].checked = true
                this.cot = index + 1
            }
        },
        // 提交答案
        send() {
            this.sear = true
            this.next = true
            console.log(this.cot);
            console.log(this.list[this.count].true);
            if (document.querySelectorAll('li input')) {
                if (this.list[this.count].true == this.cot) {
                    this.skr = true
                    if (this.list[this.count].score == 0) {
                        this.numb = this.numb + 5
                        this.list[this.count].score = 1
                    }
                } else {
                    this.skr = false
                }
            }
            if (document.querySelector('textarea')) {
                if (this.list[this.count].anwser == this.val.trim()) {
                    this.skr = true
                    if (this.list[this.count].score == 0) {
                        this.numb = this.numb + 5
                        this.list[this.count].score = 1
                    }
                } else {
                    this.skr = false
                }
            }
        },
        // 下一题
        adds() {
            var lis = document.querySelectorAll('li input')
            if (this.count >= 0 && this.count < this.list.length - 1 && this.next == true) {
                // 清空每个选项
                for (var i = 0; i < lis.length; i++) {
                    lis[i].checked = false
                }
                this.sear = false
                this.val = ''
                this.count = this.count + 1
                this.next = false
                console.log(1);
            } else {
                alert('没有提交答案或者是没有题啦')
            }
        },
        // 上一题
        reduces() {
            var lis = document.querySelectorAll('li input')
            if (this.count > 0) {
                // 清空每个选项
                for (var i = 0; i < lis.length; i++) {
                    lis[i].checked = false
                }
                this.val = ''
                this.sear = false
                this.next = false
                this.count = this.count - 1
            } else {
                alert('没题啦！！！')
            }
        }
    }
}
</script>

<style>
.peitext {
    width: 100%;
    height: 420px;
    box-sizing: border-box;
    padding: 15px;
}

.bts1,
.bts2 {
    display: block;
    width: 60px;
    height: 30px;
    background-color: #6C8FF8;
    border: 2px solid #6C8FF8;
    border-radius: 5px;
    font-size: 12px;
    color: #fff;
}
</style>